<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/jsp/pages/include/global.jsp" %>

<c:set target="${self}" property="title">商品管理</c:set>

<c:set target="${self.css}" property="plugins">
<link href="${self.path.metronic}/assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css" />
<link href="${self.path.metronic}/assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="${self.path.metronic}/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" type="text/css" />
<link href="${self.path.metronic}/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
<link href="${self.path.metronic}/assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />

<link href="${self.path.metronic}/assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<link href="${self.path.metronic}/assets/global/plugins/jquery-file-upload/blueimp-gallery/blueimp-gallery.min.css" rel="stylesheet" type="text/css" />
<link href="${self.path.metronic}/assets/global/plugins/jquery-file-upload/css/jquery.fileupload.css" rel="stylesheet" type="text/css" />
<link href="${self.path.metronic}/assets/global/plugins/jquery-file-upload/css/jquery.fileupload-ui.css" rel="stylesheet" type="text/css" />
</c:set>

<c:set target="${self.js}" property="plugins">
<script src="${self.path.metronic}/assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/scripts/datatable.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>


<script src="${self.path.metronic}/assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/vendor/tmpl.min.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/vendor/load-image.min.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/vendor/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/blueimp-gallery/jquery.blueimp-gallery.min.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/jquery.fileupload.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/jquery.fileupload-process.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/jquery.fileupload-image.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/jquery.fileupload-audio.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/jquery.fileupload-video.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/jquery.fileupload-validate.js" type="text/javascript"></script>
<script src="${self.path.metronic}/assets/global/plugins/jquery-file-upload/js/jquery.fileupload-ui.js" type="text/javascript"></script>

</c:set>

<c:set target="${self.css}" property="main">

</c:set>

<c:set target="${self.js}" property="main">
<script src="${self.path.resources}/app/js/goods.js" type="text/javascript"></script>
</c:set>

<c:set target="${self.content}" property="main">
 <input type="hidden" name="userId" value="${sessionShiroUser.realUser.userId}"/>
 <div class="row">
    <div class="col-md-12">
        <div class="portlet light">
          <div class="portlet-title">
              <div class="caption">
                  <i class="fa fa-search"></i>数据查询</div>
              <div class="tools">
                  <a href="javascript:;" class="collapse"> </a>
              </div>
          </div>
          <div class="portlet-body form">
              <!-- BEGIN FORM-->
              <form action="#" class="form-horizontal" id="query-goods-form">
                  <div class="form-body">
                      <div class="row">
                          <div class="col-md-4">
                              <div class="form-group">
                                  <label class="control-label col-md-3">商品编号</label>
                                  <div class="col-md-9">
                                      <input type="text" class="form-control" name="code">
                                  </div>
                              </div>
                          </div>
                          <!--/span-->
                          <div class="col-md-4">
                              <div class="form-group">
                                  <label class="control-label col-md-3">商品名称</label>
                                  <div class="col-md-9">
                                       <input type="text" class="form-control" name="name">
                                  </div>
                              </div>
                          </div>
                          <!--/span-->
                          <div class="col-md-4">
                              <button type="button" class="btn green query" data-table="#goods_table">查询</button>
                              <button type="reset" class="btn default">重置</button>
                          </div>
                      </div>
                  </div>
              </form>
              <!-- END FORM-->
          </div>
      </div>
    </div>
</div>

 <div class="row">
    <div class="col-md-12">
		<div class="portlet light">
	         <div class="portlet-title">
	             <div class="caption">
	                 <i class="fa fa-goodss"></i>商品列表</div>
	             <div class="actions">
	                 <a href="javascript:;" class="btn btn-default btn-sm addGoods">
	                     <i class="fa fa-plus"></i> 新增商品 </a>
	             </div>
	         </div>
	         <div class="portlet-body">
	             <table class="table table-striped table-bordered table-hover" id="goods_table" data-query-form="#query-goods-form">
	                 <thead>
	                     <tr>
	                         <th> 编号 </th>
	                         <th> 名称 </th>
	                         <th> 单价 </th>
	                         <th> 库存 </th>
	                         <th> 包邮 </th>
	                         <th> 轮播图片 </th>
	                         <th> 详情图片 </th>
	                         <th> 状态 </th>
	                         <th> 排序 </th>
	                         <th> 操作</th>
	                     </tr>
	                 </thead>
	                 <tbody>
	                     
	                 </tbody>
	             </table>
	         </div>
	     </div>
	
	</div>
</div>

<div class="modal fade bs-modal-lg" id="goodsAddDialog" tabindex="-1" role="dialog" aria-hidden="false">
	<div class="modal-dialog">
	    <div class="modal-content" id="goodsAddDialogContent">
	        <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
	            <h4 class="modal-title"><i class="fa fa-goods-plus"></i>商品定义</h4>
	        </div>
	        <div class="modal-body">
	        	<form action="#" class="form-horizontal" id="goodsForm">
	        		<input type="hidden" name="userId" value="${sessionShiroUser.realUser.userId}"/>
				    <div class="form-body">
				        <div class="form-group">
				            <label class="col-md-3 control-label">商品编号</label>
				            <div class="col-md-8">
				                <input type="text" class="form-control" placeholder="商品编号[系统自动生成]" name="code" readOnly>
				            </div>
				        </div>
				        <div class="form-group">
				            <label class="col-md-3 control-label">商品名称</label>
				            <div class="col-md-8">
				                <input type="text" class="form-control" placeholder="商品名称" name="name">
				            </div>
				        </div>
				        <div class="form-group">
				            <label class="col-md-3 control-label">商品描述</label>
				            <div class="col-md-8">
				                 <input type="text" class="form-control" placeholder="商品描述" name="remark">
				            </div>
				        </div>
				         <div class="form-group">
				            <label class="col-md-3 control-label">商品单价</label>
				            <div class="col-md-8">
				                 <input type="text" class="form-control" placeholder="商品单价" name="price">
				            </div>
				        </div>
				        <div class="form-group">
				            <label class="col-md-3 control-label">商品库存</label>
				            <div class="col-md-8">
				                 <input type="text" class="form-control" placeholder="商品库存" name="stock">
				            </div>
				        </div>
				        <div class="form-group">
				            <label class="col-md-3 control-label">是否包邮</label>
				            <div class="col-md-8">
				                 <select class="form-control select2" name="freePost">
	                                 <option value="1">是</option>
	                                 <option value="0">否</option>
                              	</select>
				            </div>
				        </div>
				        <div class="form-group">
				            <label class="col-md-3 control-label">商品排序</label>
				            <div class="col-md-8">
				                 <input type="text" class="form-control" placeholder="商品排序" name="weight">
				            </div>
				        </div>
				    </div>
				</form>
	        </div>
	        <div class="modal-footer">
	            <button type="button" class="btn green ok">保存</button>
	            <button type="button" class="btn dark btn-outline" data-dismiss="modal">关闭</button>
	        </div>
	    </div>
	    <!-- /.modal-content -->
	</div>
<!-- /.modal-dialog -->
</div>


<div class="modal fade bs-modal-lg" id="goodsEditDialog" tabindex="-1" role="dialog" aria-hidden="false">
	<div class="modal-dialog">
	    <div class="modal-content" id="goodsEditDialogContent">
	        <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
	            <h4 class="modal-title"><i class="fa fa-goods"></i>商品编辑</h4>
	        </div>
	        <div class="modal-body">
	        	<form action="#" class="form-horizontal" id="goodsEditForm">
	        		<input type="hidden" class="form-control" name="id">
	        		<input type="hidden" name="userId" value="${sessionShiroUser.realUser.userId}"/>
				    <div class="form-body">
				        <div class="form-group">
				            <label class="col-md-3 control-label">商品编号</label>
				            <div class="col-md-8">
				                <input type="text" class="form-control" placeholder="商品编号[系统自动生成]" name="code" readOnly>
				            </div>
				        </div>
				        <div class="form-group">
				            <label class="col-md-3 control-label">商品名称</label>
				            <div class="col-md-8">
				                <input type="text" class="form-control" placeholder="商品名称" name="name">
				            </div>
				        </div>
				        <div class="form-group">
				            <label class="col-md-3 control-label">商品描述</label>
				            <div class="col-md-8">
				                 <input type="text" class="form-control" placeholder="商品描述" name="remark">
				            </div>
				        </div>
				         <div class="form-group">
				            <label class="col-md-3 control-label">商品单价</label>
				            <div class="col-md-8">
				                 <input type="text" class="form-control" placeholder="商品单价" name="price">
				            </div>
				        </div>
				        <div class="form-group">
				            <label class="col-md-3 control-label">商品库存</label>
				            <div class="col-md-8">
				                 <input type="text" class="form-control" placeholder="商品库存" name="stock">
				            </div>
				        </div>
				        <div class="form-group">
				            <label class="col-md-3 control-label">是否包邮</label>
				            <div class="col-md-8">
				                 <select class="form-control select2" name="freePost">
	                                 <option value="1">是</option>
	                                 <option value="0">否</option>
                              	</select>
				            </div>
				        </div>
				        <div class="form-group">
				            <label class="col-md-3 control-label">商品排序</label>
				            <div class="col-md-8">
				                 <input type="text" class="form-control" placeholder="商品排序" name="weight">
				            </div>
				        </div>
				    </div>
				</form>
	        </div>
	        <div class="modal-footer">
	            <button type="button" class="btn green ok">保存</button>
	            <button type="button" class="btn dark btn-outline" data-dismiss="modal">关闭</button>
	        </div>
	    </div>
	    <!-- /.modal-content -->
	</div>
<!-- /.modal-dialog -->
</div>


<div class="modal fade bs-modal-lg" id="goodsImgDialog" tabindex="-1" role="dialog" aria-hidden="false">
	<div class="modal-dialog">
	    <div class="modal-content" id="goodsImgDialogContent">
	        <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
	            <h4 class="modal-title"><i class="fa fa-goods"></i>商品图片</h4>
	        </div>
	        <div class="modal-body">
	        	<form id="fileupload" action="" method="POST" enctype="multipart/form-data">
	        		<input type="hidden" name="OSSAccessKeyId" value="">
	                <input type="hidden" name="policy" >
	                <input type="hidden" name="Signature" >
	                <input type="hidden" name="callback" >
	                <input type="hidden" name="key" value="">
	                <input type="hidden" name="success_action_status" value="200">
	                <input type="hidden" name="x:uploadobject" value="goodsDetail">
	                <input type="hidden" name="x:objectid" value="">
	                <input type="hidden" name="x:filename" value="">
	                <input type="hidden" name="x:type" value="">
	        		
                    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                    <div class="row fileupload-buttonbar">
                        <div class="col-lg-12">
                            <!-- The fileinput-button span is used to style the file input field as button -->
                            <span class="btn btn-sm green fileinput-button">
                                <i class="fa fa-plus"></i>
                                <span> 选择文件... </span>
                                <input type="file" name="files[]" multiple=""> </span>
                            <button type="submit" class="btn btn-sm blue start">
                                <i class="fa fa-upload"></i>
                                <span> 批量上传 </span>
                            </button>
                            <button type="reset" class="btn btn-sm warning cancel">
                                <i class="fa fa-ban-circle"></i>
                                <span> 全部取消 </span>
                            </button>
                            <button type="button" class="btn btn-sm red delete">
                                <i class="fa fa-trash"></i>
                                <span> 全部删除 </span>
                            </button>
                            <!-- The global file processing state -->
                            <span class="fileupload-process"> </span>
                        </div>
                        <!-- The global progress information -->
                        <div class="col-lg-12 fileupload-progress fade">
                            <!-- The global progress bar -->
                            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar progress-bar-success" style="width:0%;"> </div>
                            </div>
                            <!-- The extended global progress information -->
                            <div class="progress-extended"> &nbsp; </div>
                        </div>
                    </div>
                    <!-- The table listing the files available for upload/download -->
                    <table role="presentation" class="table table-striped clearfix">
                        <tbody class="files"> </tbody>
                    </table>
                </form>
	        </div>
	    </div>
	    <!-- /.modal-content -->
	</div>
</div>

<div class="modal fade bs-modal-lg" id="goodsQrcodeDialog" tabindex="-1" role="dialog" aria-hidden="false">
	<div class="modal-dialog">
	    <div class="modal-content" id="goodsQrcodeDialogContent">
	        <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
	            <h4 class="modal-title"><i class="fa fa-goods"></i>商品小程序二维码</h4>
	        </div>
	        <div class="modal-body" style="text-align:center;">
	        	
	        </div>
	    </div>
	    <!-- /.modal-content -->
	</div>
</div>


<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<script id="template-upload" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %}
 <tr class="template-upload fade">
     <td>
         <span class="preview"></span>
     </td>
     <td>
         <span class="name">{%=file.name%}</span>
         <strong class="error text-danger label label-danger"></strong>
     </td>
     <td>
         <span class="size">Processing...</span>
         <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
             <div class="progress-bar progress-bar-success" style="width:0%;"></div>
         </div>
     </td>
     <td> {% if (!i && !o.options.autoUpload) { %}
         <button class="btn btn-sm blue start" disabled>
             <i class="fa fa-upload"></i>
             <span>上传</span>
         </button> {% } %} {% if (!i) { %}
         <button class="btn btn-sm red cancel">
             <i class="fa fa-ban"></i>
             <span>取消</span>
         </button> {% } %} </td>
 </tr> {% } %} 
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %}
 <tr class="template-download fade">
     <td>
         <span class="preview"> {% if (file.thumbnailUrl) { %}
             <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery>
                 <img src="{%=file.thumbnailUrl%}">
             </a> {% } %} </span>
     </td>
     <td>
         <span class="name"> {% if (file.url) { %}
             <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl? 'data-gallery': ''%}>{%=file.name%}</a> {% } else { %}
             <span>{%=file.name%}</span> {% } %} </span> {% if (file.error) { %}
         <div>
             <span class="label label-danger">Error</span> {%=file.error%}</div> {% } %} </td>
     <td>
         <span class="size">{%=o.formatFileSize(file.size)%}</span>
     </td>
     <td> {% if (file.deleteUrl) { %}
         <button class="btn btn-sm red delete btn-sm" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
             <i class="fa fa-trash-o"></i>
             <span>删除</span>
         </button>
         <input type="checkbox" name="delete" value="1" class="toggle"> {% } else { %}
         <button class="btn yellow cancel btn-sm">
             <i class="fa fa-ban"></i>
             <span>取消</span>
         </button> {% } %} </td>
 </tr> {% } %} 
</script>

</c:set>

<%@ include file="/WEB-INF/views/jsp/pages/include/main.jsp"%>